<!DOCTYPE html>
<html lang="" data-theme="Light">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <link rel="shortcut icon" href=<%- faviconDir %> type="image/x-icon">
  <meta name="description" content="梦想建广厦千万间，与天下寒仕俱欢颜......">
  <meta name="keywords" content="个人主页，简历，引导页，dony，donymh">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta http-equiv="Expires" content="0">
  <meta http-equiv="Pragma" content="no-store">
  <meta http-equiv="Cache-control" content="no-store">
  <meta http-equiv="Cache" content="no-store">
  <title><%- title %></title>

  <!-- 性能优化 -->
  <link rel="dns-prefetch" href="//cdn.bootcdn.net">
  <link rel="dns-prefetch" href="//dony.online">
  <link rel="preconnect" href="//cdn.bootcdn.net" crossorigin>
  <link rel="preconnect" href="//dony.online" crossorigin>

  <!-- CDN CSS资源 -->
  <!-- cesium CSS - 预加载关键样式 -->
  <!-- <link href="https://cdn.bootcdn.net/ajax/libs/cesium/1.95.0/Widgets/widgets.css" rel="preload" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link href="https://cdn.bootcdn.net/ajax/libs/cesium/1.95.0/Widgets/widgets.css" rel="stylesheet"></noscript> -->

  <%- injectStyle %>
    <%- injectHeadCDN %>

      <!-- 注入系统常量开始 -->
      <%- injectScript %>
        <!-- /注入系统常量结束 -->
</head>

<style>
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    user-select: none;
    transition: background-color 0.2s ease;
  }

  .mh-loading {
    background: radial-gradient(white, #d8eaff);
    background-size: 100%;
    background-position: center;

    height: 100%;
    width: 100%;
    position: fixed;
    z-index: 999999;
    margin-top: 0px;
    top: 0px;
    pointer-events: none;
    opacity: 1;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .mh-loading-center {
    height: 150px;
    width: 150px;
    position: relative;
    border-radius: 50%;
    background: #472eff;
    animation: zoom 1s linear infinite;
  }

  @keyframes zoom {
    0% {
      transform: scale(0);
      opacity: 1;
    }

    50% {
      opacity: 0.5;
    }

    100% {
      transform: scale(1);
      opacity: 0;
    }
  }
</style>

<body>
  <!-- 延迟加载非关键JS -->
  <div id="MhLoading" class="mh-loading">
    <div id="MhLoadingCenter" class="mh-loading-center"></div>
  </div>

  <div id="app" style="display: none;"></div>

  <!-- 主要应用脚本 -->
  <script type="module" src="/src/main.ts"></script>

  <!-- 延迟加载外部依赖 -->
  <script>
    // 在页面主要内容加载完成后延迟加载外部依赖
    window.addEventListener('load', function () {
      // 延迟加载AI标签相关脚本
      const aiLabelScript1 = document.createElement('script');
      aiLabelScript1.src = 'https://dony.online/static/js/ai-label/ai-label.pkg.min.js';
      aiLabelScript1.async = true;
      document.body.appendChild(aiLabelScript1);

      const aiLabelScript2 = document.createElement('script');
      aiLabelScript2.src = 'https://dony.online/static/js/ai-label/ai-label.js';
      aiLabelScript2.async = true;
      document.body.appendChild(aiLabelScript2);

      // 延迟加载Cesium（仅在需要时）
      if (window.location.pathname.includes('/graphics-processed/cesium')) {
        const cesiumScript = document.createElement('script');
        cesiumScript.src = 'https://cdn.bootcdn.net/ajax/libs/cesium/1.95.0/Cesium.js';
        cesiumScript.async = true;
        document.body.appendChild(cesiumScript);

        const cesiumNavScript = document.createElement('script');
        cesiumNavScript.src = 'https://dony.online/static/js/cesiumnavigation/3.0.8/cesiumnavigation.umd.js';
        cesiumNavScript.async = true;
        document.body.appendChild(cesiumNavScript);
      }
    });
  </script>

  <%- injectBodyCDN %>

    <script>
      // 移除加载动画
      window.addEventListener('load', function () {
        setTimeout(function () {
          const loading = document.getElementById('MhLoading');
          if (loading) {
            loading.style.opacity = '0';
            loading.style.transition = 'opacity 0.3s ease-out';
            setTimeout(() => loading.remove(), 300);
          }
          const app = document.getElementById('app');
          if (app) {
            app.style.display = 'block';
          }
        }, 300);
      });
    </script>
</body>

</html>